import { Control } from "ol/control";
import iconPngyc from "../../../assets/icons/ycz.png";
import VectorSource from "ol/source/Vector";
import { Map, View, Feature } from "ol";
import Point from "ol/geom/Point";
import { fromLonLat } from "ol/proj";
import * as style from "ol/style";
import { Vector as VectorLayer } from "ol/layer";
// 引入图标图片
import iconPng from "../../../assets/icons/sst1.png";

//这是一个Map 操作方法的JS 文件 帮我封装一下 
//隐藏摄像头 标记   Point 特征点  
export function hideLayer(pointInit, hidType = 'all') {
  if (pointInit.value) {
    // 获取图层的实际名称
    const actualLayerName = pointInit.value.get("name"); // 判断图层名称是否匹配
    // 如果图层名称匹配，则切换图层的可见性
    if (actualLayerName === 'pointInitLayer') {
      const currentVisibility = pointInit.value.getVisible();
      if (hidType == 'all') {
        pointInit.value.setVisible(!currentVisibility);
      } else if (hidType == 'off') {
        pointInit.value.setVisible(false);
      } else if (hidType == 'on') {
        pointInit.value.setVisible(true);
      }

    }

  }
};
//关闭弹窗
export function closePopup(overlayDig) {
  // overlayDig.value.setPosition(undefined);
  overlayDig.setPosition(undefined);
};

// 创建自定义控件 // 添加自定义控件到地图
export class CustomControl extends Control {
  constructor() {
    super({
      element: document.createElement("div"),
    });
    this.element.innerHTML = `<img src="${iconPngyc}" alt="Icon" style="width: 21px; height: 24px; border-radius: 50%;" />`;
    this.element.style.position = "absolute";
    this.element.style.top = "55px";
    this.element.style.left = "9px";
    this.element.style.backgroundColor = "white";
    this.element.style.padding = "0px";
    this.element.style.borderRadius = "4px";
    this.element.style.height = "22px";
    this.element.style.width = "22px";
  }
}

//动画缩放功能 本来是想和 摄像头点击后做一个zoom 效果 但是那个 定位会不准 不想调整了 就不做了
export function zoomIn(map, targetZoom) {
  // 放大地图到指定的缩放级别

  map.value.getView().animate(
    {
      zoom: targetZoom,
      duration: 500, // 动画持续时间（毫秒）
    },
    () => {
      console.log("动画完成");
      // 这里可以执行任何需要在动画完成后进行的操作
    }
  );
};


// 矢量图层添加方法 
export function addPointOverlay(map, arrlist = []) {

  // 创建矢量数据源，将图标特性添加进容器中
  const vectorSource = new VectorSource({});
  arrlist.forEach((item) => {
    // 创建图标特性
    const iconFeature = new Feature({
      geometry: new Point(fromLonLat([item.longitude, item.latitude])), // 图标位置
      name: item.name,
      longitude: item.longitude,
      latitude: item.latitude,
      remark: item.remark,
      //还可以添加其他属性
    });
    const iconStyle = new style.Style({
      image: new style.Icon({
        anchor: [0.1, 0.1], // 根据图标的大小，
        anchorXUnits: "pixels",
        anchorYUnits: "pixels",
        src: iconPng, // 或者 src: require('../../assets/images/icon.png')
      }),
    });

    // 把样式应用到图标上
    iconFeature.setStyle(iconStyle);

    vectorSource.addFeature(iconFeature);
  });
  //创建矢量图层
  const point = new VectorLayer({
    name: 'pointLayer',
    source: vectorSource,
    properties: {
      name: 'pointLayer'
    }
  });
  map.value.addLayer(point);

};

